import React from 'react';
import { Row, Col, Form } from 'antd';
import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
import { SelectC, FirstHeaderC, SecondHeaderC, PrimaryC, IconC } from '../../components';

class SelectCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ds1: undefined,
      ds11: [
        { title: '苹果', value: '1' },
        { title: '香蕉', value: '2', disabled: true },
        { title: '西瓜', value: '3' },
        { title: '橙子', value: '4' },
      ],
      ds22: [
        { title: '苹果1', value: '1' },
        { title: '香蕉1', value: '2', disabled: true },
        { title: '西瓜1', value: '3' },
        { title: '橙子1', value: '4' },
      ],
      init1: undefined,
      init2: undefined,
      ds2: undefined,
      ds3: undefined,
      ds4: undefined,
      dataInitial: undefined,
      dataInitial1: undefined,
      dataInitial2: '1',
      dataInitial3: '3',
    };
    this.formRef = React.createRef();
    setTimeout(() => {
      const ds = [];
      for (let i = 0; i < 20; i++) {
        ds.push({ title: `item${i}`, value: i.toString() });
      }
      this.setState({
        ds1: ds,
        ds3: ds,
        init1: '4',
        init2: ['1', '2', '3'],

        dataInitial: '4',
        dataInitial1: ['1', '3'],
        dataInitial2: '3',
      });
    }, 3000);
  }

  change = () => {
    this.asyncSelectRef.setSelect('3');
  };

  change1 = () => {
    const ds = [];
    for (let i = 100; i < 120; i++) {
      ds.push({ title: `异步${i}`, value: i.toString() });
    }
    this.setState(
      {
        ds3: ds,
      },
      () => {
        this.state.SelectC1.setSelect(['111', '113']);
      },
    );
  };

  onSearch = (e) => {
    setTimeout(() => {
      const ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds2: ds,
      });
    }, 500);
  };

  onSearch1 = (e) => {
    setTimeout(() => {
      const ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds4: ds,
      });
    }, 500);
  };

  handleReset = () => {
    this.resetSelectRef.setSelect('');
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        ds22: [
          { title: '苹果1', value: '1' },
          { title: 'bb', value: '2' },
          { title: 'cc', value: '3' },
          { title: 'dd', value: '4' },
        ],
      });
    }, 8000);
  }

  handleDelete = () => {
    this.state.SelectC2.setSelect('');
  };

  handleAdd = () => {
    const ds11New = this.state.ds11.concat({ title: '榴莲', value: '5' });
    this.setState({
      ds11: ds11New,
    });
  };

  render() {
    const { ds11 } = this.state;
    const ds2 = [
      {
        label: '水果',
        list: [
          { title: '苹果', value: '1' },
          { title: '香蕉', value: '2', disabled: true },
          { title: '西瓜', value: '3' },
          { title: '橙子', value: '4' },
        ],
      },
      {
        label: '学习工具',
        list: [
          { title: '铅笔', value: '11' },
          { title: '直尺', value: '22', disabled: true },
          { title: '作业本', value: '33' },
          { title: '圆规', value: '44' },
        ],
      },
    ];

    return (
      <Form ref={this.formRef}>
        <Row style={{ padding: '20px' }}>
          <FirstHeaderC title='下拉选择组件-单选' />
          <Col span={6}>
            <SecondHeaderC title='基本场景' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select1' // Form识别的Item ID
              dataSource={this.state.ds22}
              onChange={(e) => console.log(e)}
              rules={[{ required: true, message: '请输入' }]}
              onRef={(ref) => (this.resetSelectRef = ref)}
            />
            <PrimaryC title='点击重置' onClick={this.handleReset} />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='有初始化值' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select2' // Form识别的Item ID
              dataSource={ds11}
              initialValue={this.state.dataInitial2}
              onChange={(e) => console.log(e)}
              rightContent={[<PlusOutlined />]}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='异步加载' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select3' // Form识别的Item ID
              dataSource={ds11}
              initialValue={this.state.init1}
              onChange={(e) => console.log(e)}
              onRef={(ref) => (this.asyncSelectRef = ref)}
            />
            <PrimaryC title='点击更改' onClick={this.change} />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='模拟搜索，从后端获取数据' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select4' // Form识别的Item ID
              dataSource={this.state.ds2}
              onChange={(e) => console.log(e)}
              showSearch={true}
              onSearch={this.onSearch}
              filterOption={false}
              allowClear={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='下拉选择，右侧多个按钮  索引0代表最右边按钮' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select28' // Form识别的Item ID
              dataSource={ds11}
              onChange={(e) => console.log(e)}
              filterOption={false}
              allowClear={true}
              rightContentSpacing={8}
              onRef={(ref) => this.setState({ SelectC2: ref })}
              rightContent={[<IconC type={'deleteBlueTwo'} onClick={this.handleDelete} />, <PlusOutlined onClick={this.handleAdd} />]} // 从右到左排列 索引0代表最右边依次往左排
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='前端自搜索' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select5' // Form识别的Item ID
              dataSource={this.state.ds1}
              onChange={(e) => console.log(e)}
              showSearch={true}
              filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            />
          </Col>
          <FirstHeaderC title='下拉选择组件-多选' />
          <Col span={6}>
            <SecondHeaderC title='基本场景' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select21' // Form识别的Item ID
              dataSource={this.state.ds22}
              onChange={(e) => console.log(e)}
              isMultiple={true}
              initialValue={this.state.dataInitial1}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='有初始化值' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select22' // Form识别的Item ID
              dataSource={ds11}
              initialValue={['1', '3']}
              onChange={(e) => console.log(e)}
              isMultiple={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='异步加载' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select23' // Form识别的Item ID
              dataSource={this.state.ds3}
              initialValue={this.state.init2}
              onChange={(e) => console.log(e)}
              onRef={(ref) => this.setState({ SelectC1: ref })}
              isMultiple={true}
            />
            <PrimaryC title='点击更改' onClick={this.change1} />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='模拟搜索，从后端获取数据' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select24' // Form识别的Item ID
              dataSource={this.state.ds4}
              onChange={(e) => console.log(e)}
              onSearch={this.onSearch1}
              filterOption={false}
              isMultiple={true}
              allowClear={true}
            />
          </Col>

          <Col span={6}>
            <SecondHeaderC title='前端自搜索' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select25' // Form识别的Item ID
              dataSource={this.state.ds1}
              onChange={(e) => console.log(e)}
              filterOption={(input, option) => {
                console.log(option.props.children);

                return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
              }}
              isMultiple={true}
              allowClear={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='分组显示多选' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select26' // Form识别的Item ID
              dataSource={ds2}
              onChange={(e) => console.log(e)}
              filterOption={(input, option) => {
                return option.props.children.indexOf(input.toLowerCase()) >= 0;
              }}
              isGroup={true}
              isMultiple={true}
              allowClear={true}
            />
          </Col>
          <Col span={6}>
            <SecondHeaderC title='分组显示单选' />
            <SelectC
              form={this.formRef.current} // form对象
              title='下拉选择' // 显示名称
              dataIndex='select27' // Form识别的Item ID
              dataSource={ds2}
              onChange={(e) => console.log(e)}
              filterOption={(input, option) => {
                return option.props.children.indexOf(input.toLowerCase()) >= 0;
              }}
              isGroup={true}
              isMultiple={false}
              allowClear={true}
            />
          </Col>
        </Row>
      </Form>
    );
  }
}

export default SelectCDemo;
